<template>
  <div id="news-detail" class="news-detail padding-15" v-if="detailData.hasOwnProperty('recommended')">
    <!-- <van-button @click="$router.push({name: 'news', query: { type: $route.query.type }})">返回列表</van-button> -->
    <h2 class="news-title">{{ detailData.subject }}</h2>
    <div class="publisher-area">
      <span>{{ detailData.uid}} <span class="padding-l-10">{{ $common.convertDate(detailData.date, 'Y-M-D') }}</span></span>
      <div class="read-wrap" @click="goToRead()">
        <div class="reader-imgs-wrap">
          <template v-for="img in reader">
            <img v-if="img.pic" class="reader" :src="$common.returnImg(img.pic)" />
            <img v-else class="reader" src="../../assets/notification/cell_head.png"/>
          </template>
          
        </div>
        <span>
          {{ detailData.read_num }} 阅
          <van-icon name="arrow" size="14"></van-icon>
        </span>
      </div>
    </div>
    <div class="news-content" v-html="detailData.content" @click="imageChgange($event)"></div>
    <van-divider dashed/>

    <div v-if="attachment && attachment.length > 0" class="attachment-list">
      <h5><small>附件: </small></h5>
      <p class="van-ellipsis" v-for="item in attachment" @click="previewFile(item)">{{ item.filename }}</p>
    </div>

    <h3 v-if="detailData.recommended && detailData.recommended.length > 0">精彩推荐</h3>
    <div class="reference-card" v-for="item in detailData.recommended" :key="`${item.id}推荐`" @click="getDetailData(item.id)">
      <div class='content' :class="{'full-name': !item.pic}">
        <h4 class="title van-multi-ellipsis--l2">{{ item.subject }}</h4>
        <p  class='sub-title'>
          <span class="user-name van-ellipsis">{{ item.uid }}</span>
          <span v-if="item.date"> {{ $common.convertDate(item.date, 'Y-M-D') }}<span class="read-num">{{ item.read_num }}阅</span></span>
        </p>
      </div>
      <van-image v-if="item.pic" class="image" :src="$common.returnImg(item.pic)" width="115" height="80"></van-image>
    </div>
  </div>
</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        detailData: {},
        attachment: [],
        imgList: [],   //富文本中的图片集合
      }
    },
    activated() {
      this.detailData = {}
      this.getDetailData(null)

      setTimeout(_ => {
        if(this.$route.query.type == 1) {
          this.$bridge.callHandler('navTitle', {title: '新闻详情'})
        } else {
          this.$bridge.callHandler('navBackground', {title: '党建详情'})
        }
        // 从非原生页进入需要拦截返回
        if(this.$route.query.from != 'origin') {
          this.$bridge.callHandler('navBack')
          this.$bridge.registerHandler('navBackClicked', _ => {
            this.$router.push({name: 'news', query: { type: this.$route.query.type }})
          })
        } else {
          this.$bridge.registerHandler('navBackClicked', (data, callback) => {
            callback('h5done')
          })
        }
      }, 200)
    },
    mounted() {
      
    },
    methods: {
      getDetailData(id) {
        let self = this
        self.$toast({
          duration: 0,
          forbidClick: true,
          className: 'loading-toast',
          icon: require('../../assets/loading.gif'),
        })
        let config = {
          url: `${this.$common.basePath}aatp5/public/index.php/message/Notices/workDetail`,
          data: {
            id: id || this.$route.query.id,
            uid: this.$store.state.userId
          },
          method: 'POST'
        }
        if(!self.newsFinished) {
          self.detailData = {}
          self.$axios(config).then(res => {
            self.detailData = res.data
            self.imgList = self.getImgSrc(res.data.content)
            console.log(self.imgList)
            self.attachment = res.data.appendix
            self.reader = res.data.read_people.reverse()
            self.$nextTick(_ => {
              self.$toast.clear()
            })
            // url变动 重新注册bridge
            if(id) {
              self.$router.replace({ name: 'newsDetail', query: { id: id, type: self.$route.query.type, from: self.$route.query.from }})
              // 从非原生页进入需要拦截返回
              if(self.$route.query.from != 'origin') {
                setTimeout(_ => {
                  self.$bridge.callHandler('navBack')
                  self.$bridge.registerHandler('navBackClicked', _ => {
                    self.$router.push({name: 'news', query: { type: self.$route.query.type}})
                  })
                }, 300)
              } else {
                this.$bridge.registerHandler('navBackClicked', (data, callback) => {
                  callback('h5done')
                })
              }
              if(this.$route.query.type == 1) {
                this.$bridge.callHandler('navTitle', {title: '新闻详情'})
              } else {
                this.$bridge.callHandler('navBackground', {title: '党建详情'})
              }
            }
          }).catch(err => {
            self.$nextTick(_ => {
              self.$toast.clear()
            })
          })
        }
      },
      /**
       * 预览附件
       * @return {[type]} [description]
       */
      previewFile(item) {
        this.$bridge.callHandler('showPreview', {
          url: `${this.$common.filePath}${item.fileaddr}`,
          fileName:  item.filename
        })
        window.open(`${this.$common.filePath}${item.fileaddr}?filename=${item.filename}`)
      },
      goToRead() {
        this.$router.push({name: 'hasRead', query: { id: this.$route.query.id , type: this.$route.query.type, from: this.$route.query.from}})
      },

      /**
       * 富文本点击事件
       * @param  {[type]} e [description]
       * @return {[type]}   [description]
       */
      imageChgange(e){
        if (e.target.nodeName == 'IMG') {
          this.$bridge.callHandler('imgPreview',{current: e.target.currentSrc,lists: this.imgList})
        } else {
          return
        }
      },
      /**
       * 获取富文本的所有图片
       * @param  {[type]} rich [description]
       * @return {[type]}      [description]
       */
      getImgSrc(htmlstr) {
        let imgList = [];
        htmlstr.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, (match, capture) => {
          imgList.push(capture);
        });
        return imgList;
      }
    }
  }
</script>

<style lang="less">
  #news-detail {
    .news-content > * {
      max-width: calc(100vw - 30px)!important;
    }
    .news-content {
      span, p {
        font-size: 16px!important;
        line-height: 32px!important;
      }
    } 
    .news-content img {
      display: block;
      max-width: 100%!important;
      height: auto!important;
    }
    .news-content > table {
      border-collapse: collapse;
      border: 1px solid #e1e1e1;
    }
    .news-content > table td {
      border: 1px solid #e1e1e1;
    }
    h2 {
      font-size: 20px;
    }
    h3 {
      margin-bottom: 0;
      font-size: 17px;
    }
    &.padding-15 {
      padding: 15px;
    }
    .news-title {
      margin: 0 0 15px 0;
      color: #333;
    }
    .publisher-area {
      display: flex;
      margin-bottom: 15px;
      justify-content: space-between;
      align-items: center;
      color: #999;
      font-size: 14px;
      .padding-l-10 {
        padding-left: 10px;
      }
      & > span {
        height: 18px;
        line-height: 18px;
      }
    }
    .read-wrap {
      & > * {
        display: inline-block;
        vertical-align: middle;
      }
      .van-icon {
        line-height: 24px;
      }
      .reader-imgs-wrap {
        height: 22px;
        vertical-align: middle;
        margin-right: 6px;
      }
    }
    .reader {
      display: inline-block;
      width: 24px;
      height: 24px;
      border: 2px solid #fff;
      border-radius: 6px;
      box-sizing: border-box;
      overflow: hidden;
      &:first-child {
        margin-left: -7px;
      }
      &:nth-child(2) {
        margin-left: -7px;
      }
      &:last-child {
        margin-left: -7px;
      }
    }
    .reference-card {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
      padding: 15px 0;
      &:last-child {
        border-bottom: none;
      }
      .content {
        height: 80px;
        position: relative;
        width: calc(100% - 130px);
        &.full-name {
          width: 100%;
        }
        .title {
          margin-top: 0;
          height: 48px;
          margin-bottom: 0px;
          width: 100%;
          font-size: 17px;
          font-weight: normal;
          color: #333;
        }
        .sub-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: calc(100%);
          font-size: 14px;
          color: #999;
          .user-name {
            display: inline-block;
          }
          .read-num {
            margin-left: 15px;
          }
        }
      }
      .image.van-image {
        margin-left: 15px;
        width: 115px!important;
        border-radius: 2px!important;
         img {
          width: 115px!important;
          border-radius: 2px;
        }
      }
    }
    .attachment-list {
      p {
        padding: 15px;
        margin-top: 0;
        background-color: #f5f5f5;
      }
    }
  }
</style>
